<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
      <h1>The Goods Page</h1>
      <form th:action="@{/goods/doFindGoods}" method="get">
          <input type="text" name="name">
          <input type="submit" class="btn btn-primary btn-sm" value="查询">
          <input type="button" class="btn btn-primary btn-sm" onclick="doLoadGoodsAddUI()" value="添加商品">
      </form>

      <table class="table">
          <!--/* 定义表头部分 */-->
          <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>remark</th>
                <th>createdTime</th>
                <th>operation</th>
            </tr>
          </thead>
          <!--/* 定义表体部分 */-->
          <tbody>
          <!--/* th:each 为thymeleaf中定义的迭代标签属性,需要循环创建哪些元素,th:each就写到哪个元素内部 */-->
              <tr th:each="g:${list}"><!--/*这里的g表示集合中的一个元素,可以自己起名字*/-->
                 <td th:text="${g.id}">1</td> <!--/*g.id是访问g指向对象的getId方法*/-->
                 <td th:text="${g.name}">A</td>
                 <td th:text="${g.remark}">A..</td>
                 <td th:text="${#dates.format(g.createdTime, 'yyyy/MM/dd HH:mm')}">2020/12/30</td>
                 <td><button th:onclick="doDeleteById([[${g.id}]])" class="btn btn-danger btn-xs">delete</button>
                     <button th:onclick="doFindById([[${g.id}]])" class="btn btn-warning btn-xs">update</button></td>
              </tr>
          </tbody>
      </table>
  </div>
  <script>
      var rootUrl="http://localhost"
      function doFindById(id){
          location.href=`${rootUrl}/goods/doFindById/${id}`;
      }
      function doLoadGoodsAddUI(){
          location.href=`${rootUrl}/goods/doGoodsAddUI`;
      }
      function doDeleteById(id){
          console.log("===doDeleteById===")
           //Get 请求
          //注意,这里等号右边使用了反引号``,在反引号内部可以使用${}表达式获取变量的值
          //location.href=`doDeleteById?id=${id}`; //这个url会替换当前url中最后一个"/"后面的内容
          //location.href=`/goods/doDeleteById?id=${id}`//这个url会替换当前url中port后面"/"中的内容
          //绝对路径
          location.href=`${rootUrl}/goods/doDeleteById?id=${id}`;
      }
  </script>
</body>
</html>